<template>
  <!-- 多选框组 -->
  <div
    class="pho-form-item pho-form-flex"
    :style="$attrs.isTop ? 'flex-direction: column;' : ''"
  >
    <van-field
      class="form-input-hidden"
      v-bind="$attrs"
      :value="value"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      :placeholder="$attrs.placeholder"
      input-align="right"
    />
    <van-checkbox-group
      class="right-box"
      v-model="formValue"
      direction="horizontal"
      v-bind="$attrs"
      @change="onChange"
    >
      <van-checkbox
        v-for="item in $attrs.options"
        :key="item.value"
        :name="item.value"
        :icon-size="16"
        shape="square"
        style="margin-bottom: 5px"
        >{{ item.label }}</van-checkbox
      >
    </van-checkbox-group>
  </div>
</template>

<script>
export default {
  name: "phone-form-checkbox-group",
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formValue: [],
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.formValue = this.value ? this.value.split(",") : [];
      },
    },
  },
  methods: {
    onChange(value) {
      this.$emit("update", value ? value.join(",") : "");
    },
  },
};
</script>

<style lang="scss" scoped></style>
